<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="like" type="checkbox">足球
    <input class="like" type="checkbox">篮球
    <input class="like" type="checkbox">排球
    <input class="like" type="checkbox">乒乓球
    <button id="all">全选</button>
    <button id="no">不选</button>
    <button id="reverse">反选</button>
    <script>
        var inputs = document.getElementsByClassName("like");
        var all = document.getElementById("all");
        var no = document.getElementById("no");
        var reverse = document.getElementById("reverse");

        all.onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
        no.onclick = function () {
            for (var j = 0; j < inputs.length; j++) {
                inputs[j].checked = false;
            }
        }
        reverse.onclick = function () {
            for (var k = 0; k < inputs.length; k++) {
                // console.log(inputs[k].checked);
                // if (inputs[k].checked == true) {
                //     inputs[k].checked = false;
                // } else {
                //     inputs[k].checked = true;
                // }
                 inputs[k].checked = (inputs[k].checked == true)? false:true;
                // inputs[k].checked = !inputs[k].checked;
            }
        }

    </script>
</body>

</html>